<mat-card [ixUiSearch]="searchableElements.elements.allowedIpAddresses">
  <mat-toolbar-row>
    <h3 class="card-title">
      {{ 'Allowed IP Addresses' | translate }}

      <ix-tooltip
        class="tooltip"
        [header]="'Allowed IP Addresses' | translate"
        [message]="'IP addresses and networks that are allowed to use API and UI. If this list is empty, then all IP addresses are allowed to use API and UI.' | translate"
      ></ix-tooltip>
    </h3>

    <div class="actions action-icon">
      <button
        *ixRequiresRoles="requiredRoles"
        mat-button
        [ixTest]="['configure', 'ip-address']"
        [disabled]="dataProvider.isLoading$ | async"
        [ixUiSearch]="searchableElements.elements.configure"
        (click)="onConfigure()"
      >
        {{ 'Configure' | translate }}
      </button>
    </div>
  </mat-toolbar-row>

  <ix-table
    class="table"
    [ix-table-empty]="!(dataProvider.currentPageCount$ | async)"
    [emptyConfig]="emptyService.defaultEmptyConfig(dataProvider.emptyType$ | async)"
  >
    <thead
      ix-table-head
      [columns]="columns"
      [dataProvider]="dataProvider"
    ></thead>
    <tbody
      ix-table-body
      [columns]="columns"
      [dataProvider]="dataProvider"
      [isLoading]="!!(dataProvider.isLoading$ | async)"
    ></tbody>
  </ix-table>
</mat-card>
